<template>
  <el-form :model="form" label-width="120px" class="form">
    <el-form-item label="歌单标题">
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="歌单介绍">
      <el-input v-model="form.introduction" />
    </el-form-item>
    <el-form-item label="歌单类型">
      <el-input v-model="form.style" />
    </el-form-item>
    <el-form-item label="上传歌单图片">
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action="http://localhost:8888/songList/add"
        :auto-upload="false"
        :data="params"
        :on-success="handleSuccess"
      >
        <template #trigger>
          <el-button type="primary">选择图片</el-button>
        </template>
        <el-button class="ml-3" type="success" @click="submitUpload">
          创建歌单
        </el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  defineEmits,
} from "vue";
import LuoForumBar from "@/views/forum/LuoForumBar.vue";
import { Search } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import { HttpManager } from "@/api";

// const emit = defineEmits(["upload-list"]);

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const form = reactive({
      title: "",
      introduction: "",
      style: "",
    });
    const params = {
      userid: store.getters.userId,
      title: "",
      introduction: "",
      style: "",
    };
    const uploadRef = ref();

    async function handleSuccess(res) {
      (proxy as any).$message({
        message: res.message,
        type: res.type,
      });

      if (res.success) {
        (form.title = ""),
          (form.introduction = ""),
          (form.style = ""),
          proxy.$emit("upload-list");
      }
    }

    async function submitUpload() {
      (params.userid = store.getters.userId),
        (params.title = form.title),
        (params.introduction = form.introduction),
        (params.style = form.style);
      uploadRef.value.submit();
      await getUSongList(proxy.$store.getters.userId);
    }

    const userList = ref([]); //用户创建的歌单列表
    //获取用户歌单
    async function getUSongList(value) {
      if (!value) return;
      const result = (await HttpManager.getUserSongList(value)) as ResponseBody;
      userList.value = result.data;
      let results = [];
      for (let i = 0; i < userList.value.length; i++) {
        results.push({
          label: userList.value[i].title,
          value: userList.value[i].id,
        });
      }
      await proxy.$store.commit("setUserSongList", results);
    }
    return {
      params,
      form,
      uploadRef,
      handleSuccess,
      submitUpload,
    };
  },
});
</script>

<style scoped>
.form {
  padding: 40px;
  width: 500px;
  height: 400px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20vh;
  border-radius: 10px;
}
</style>
